<script setup>
import { defineProps, ref, toRef } from 'vue';
const emit = defineEmits(['updateUser', 'close']);

const props = defineProps({
    users: Array,
    uuid: String
})
//处理滑动
const startY = ref(0);
const scrollTop = ref(0);
const startScroll = (event) => {
    startY.value = event.touches[0].clientY;
    scrollTop.value = scrollContainer.value.scrollTop;
}
const onScroll = (event) => {
    const currentY = event.touches[0].clientY;
    const deltaY = currentY - startY.value;
    scrollContainer.value.scrollTop = scrollTop.value - deltaY;
}

const scrollContainer = ref(null);

//处理数据
const uuidSelected = ref(props.uuid);
const handleSelectUser = (uuid) => {
    emit('updateUser', uuid);
    console.log(uuid);
    emit('close');
}
const selectUuid = (uuid) => {
    uuidSelected.value = uuid;
}
//ui处理
const handleCancel = () => {
    uuidSelected.value = props.uuid;
    emit('close', 'cancel');
}
</script>
<template>
    <div class="select-menu">
        <!-- @touchstart.passive="startScroll" @touchmove.prevent="onScroll" -->
        <div class="scroll-area" ref="scrollContainer">
            <ul>
                <li v-for="user in props.users">

                    <div v-if="user.uuid == uuidSelected" class="userSelected" @click="selectUuid(user.uuid)">
                        {{ user.name }}
                    </div>
                    <div v-else class="user" @click="selectUuid(user.uuid)">
                        {{ user.name }}
                    </div>
                </li>
            </ul>
        </div>
        <div class="button-area">
            <button id="cancel" @click="handleCancel">取消</button>
            <button id="submit" @click="handleSelectUser(uuidSelected)">确认</button>
        </div>
    </div>
</template>
<style>
.select-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: #4CAF50;
    border-style: solid;
    border-radius: 5px;
    padding: 1rem;
    width: 80vw;
    height: 80vh;
    background-color: white;
    overflow: hidden;
}

.scroll-area {
    height: 90%;
    overflow-y: auto;
    touch-action: pan-y;
}

.scroll-area ul {
    list-style-type: none;
    padding: 0;
}

.scroll-area ul li .user {
    border: 5px solid #4CAF50;
    border-radius: 15px;
    font-size: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.scroll-area ul li .userSelected {
    border: 5px solid #4CAF50;
    border-radius: 15px;
    font-size: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #4CAF50;
    color: white;
}

.select-menu .button-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

.select-menu .button-area button {
    font-size: 2rem;
    border: none;
    border-radius: 5px;
    color: white;
}

.select-menu .button-area button#cancel {
    background-color: tomato;
}

.select-menu .button-area button#submit {
    margin-right: 0.5rem;
    background-color: #4CAF50;
}
</style>